<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="hero" id="king" name="巾帼不让须眉">
        <p>蔡文姬</p>
        <p>安琪拉</p>
        <p>甄姬</p>
    </div>
    <script>
        // 克隆节点
        // 节点.cloneNode(true|false)

        //获取元素  
        var divEle = document.querySelector('#king');

        var newEle = divEle.cloneNode();


        document.body.appendChild(newEle);

        var newEle2 = divEle.cloneNode(true);


        document.body.appendChild(newEle2);


        /* 
        
            1.创建节点  
            document.createElement
            2.创建文本节点
            document.createTextNode
            3.插入节点 
            父节点.appendChild(节点);
            父节点.insertBefore(节点,谁的前面);
            4.删除节点
            父节点.removeChild(节点);
            节点.remove();
            5.替换节点
            父节点.replaceChild(换上节点,换下节点);
            6.克隆节点
            节点.cloneNode(true|false)
        
        */

    </script>
</body>
</html>